'use strict'
const path = require('path')

const defaultSettings = require('./src/settings.js') // 一些项目的全局设置 如标题这类，可以在配置里用 也可以在页面里面用的

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'Hello Vue'

// 如果用80端口，可能会有权限问题
// 可以在命令行里面自己输入默认的端口，也可以一个默认的 port = 9527 npm run dev OR npm run dev --port = 9527
const port = process.env.port || process.env.npm_config_port || 9529

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 资源目录，本地调试一般'./'或者'.'都没关系，然后production正式环境要看服务器那边的端口是怎么指定的
  outputDir: 'dist', // 打包所在位置
  assetsDir: 'static', // 打包之后的静态文件，这个例子完整就是'dist/static'
  // pages: multi-pages模式使用
  lintOnSave: process.env.NODE_ENV !== 'production', // eslint是否在调试的时候就报错，一般本地开发的时候是打开，然后生产环境就关掉 防止以为这些格式在浏览器一堆报错
  productionSourceMap: false, // 不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码
  devServer: { // 本地调试的devserver
    port: port, // 端口
    open: false, // 是不是默认打开端口页面 npm run dev后自动打开页面
    overlay: { // 都设置为true时,让浏览器 overlay 同时显示警告和错误
      warnings: false,
      errors: true
    },
    proxy: { // 代理
      // '/66': {
      //   target: 'http://192.168.0.142:8080',
      //   changeOrigin: true,
      //   pathRewrite: {
      //     '^/66': ''
      //   }
      // }
      // '/156': {
      //   target: 'http://192.168.0.156:8080',
      //   changeOrigin: true,
      //   pathRewrite: {
      //     '^/156': ''
      //   }
      // },
      '/': {
        // target: 'http://192.168.0.182',
        // target: 'http://192.168.1.21:8787/', // 电商
        // target: 'http://lians.yun.e-tecsun.com/', // 连山
        target: 'http://120.78.89.4:8080/',
        changeOrigin: true,
        ws: false
      }
    }
  },

  /**
   * configureWebpack是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。
    可以是一个对象：被 webpack-merge 合并到webpack 的设置中去
    也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或
    新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。
    在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
   */
  configureWebpack: {
    name: name,
    resolve: { // resolve 配置模块如何解析
      alias: {
        '@': resolve('src'),
        '@c': resolve('src/components'), // 组件
        '@a': resolve('src/api'), // api
        '@v': resolve('src/views'), // views页面
        '@u': resolve('src/utils'), // utils 通用方法
        '@ven': resolve('src/vendor') // 第三方库
      }
    }
  },

  /**
   * chainWebpack 这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则
   * 和具名插件，可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件
   */
  chainWebpack(config) {
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      .when(process.env.NODE_ENV === 'development',
        // config => config.devtool('cheap-source-map')
        config => config.devtool('source-map') // 解决打印行数不一致问题
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({ // 分包策略，建议将一些不经常改动的拆分即可
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs', // 将项目需要用到npm包如vue、vue-router那些，单独拆成一个文件提高打包效率 不用每次都打包这些基本不改动的东西
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // 仅包装最初依赖的第三方
                },
                elementUI: { // 拆分element-ui，理由同上
                  name: 'chunk-elementUI', // 将elementUI拆分为单个包
                  priority: 20, // 权重需要大于libs和app，否则将打包成libs或app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为了适应cnpm
                },
                commons: { // 其他的拆包，不建议全都拆包，拆的太散，用户浪费在请求过程的事件会较多，
                  name: 'chunk-commons', // 打包后的文件名
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  重复3次才能打包到此模块
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  }
}
